var styles = {};
$(document).ready(function(){
    styles = JSON.parse($("#styles").val());
    styleChanges();

    $('#button_background_color').colorpicker({
        allowEmpty:true,//允许为空,显示清楚颜色按钮
        color: styles.button_background_color,//初始化颜色
        showInput: true,//显示输入
        containerClassName: "full-spectrum",
        showInitial: true,//显示初始颜色,提供现在选择的颜色和初始颜色对比
        showPalette: true,//显示选择器面板
        showSelectionPalette: true,//记住选择过的颜色
        showAlpha: true,//显示透明度选择
        maxPaletteSize: 7,//记住选择过的颜色的最大数量
        preferredFormat: "hex"//输入框颜色格式,(hex十六进制,hex3十六进制可以的话只显示3位,hsl,rgb三原
    }); 
    $('#button_text_color').colorpicker({
        allowEmpty:true,//允许为空,显示清楚颜色按钮
        color: styles.button_text_color,//初始化颜色
        showInput: true,//显示输入
        containerClassName: "full-spectrum",
        showInitial: true,//显示初始颜色,提供现在选择的颜色和初始颜色对比
        showPalette: true,//显示选择器面板
        showSelectionPalette: true,//记住选择过的颜色
        showAlpha: true,//显示透明度选择
        maxPaletteSize: 7,//记住选择过的颜色的最大数量
        preferredFormat: "hex"//输入框颜色格式,(hex十六进制,hex3十六进制可以的话只显示3位,hsl,rgb三原
    });
});

function inputChange(id) {
    var value = $("#"+id).val();
    if (id == "button_background_color") {
        styles.button_background_color = value;
    } else if (id == "button_text_color") {
        styles.button_text_color = value;
    } else if (id == "botton_text") {
        styles.botton_text = value;
    }
    styleChanges();
}

function gifShowSelect(gif_show) {
    styles.gif_show = gif_show;
    styleChanges();
}

function styleSelect(style) {
    styles.style = style;
    styleChanges();
}

function redirectStyleSelect(type) {
    styles.redirect_style = type;
    styleChanges();
}

function jsUploadCallBack(imgsrc) {
    styles.logo = imgsrc;
    $("#logo_demo").attr("src",imgsrc);
    styleChanges();
}

function buttonBorder(button_border) {
    styles.button_border = button_border;
    styleChanges();
}

function submitStyle() {
    var sendstyles = {};
    if (styles.style == 1) {
        sendstyles = {"style":1,"logo":"https://nilife.oss-cn-beijing.aliyuncs.com/wepage/20210421-180054-178.png","button_border":1,"button_background_color":"#06ae56","button_text_color":"#ffffff","botton_text":"点击立即前往微信","postion":1,"gif_show":1,"redirect_style":1,"redirect_url":""};
    } else {
        sendstyles = styles;
    }
    sendstyles.links_id = $("#links_id").val();
    sendstyles.users_id = $("#users_id").val();
    $.ajax({
        url: '/api/version/1/links/links_lists_h5update',
        type: 'POST',
        data: sendstyles,
        success:function(data){
            if (data.status == "success") {
                mviewToastr("success",data.msg+"3秒后自动返回。");
                setTimeout(function (){
                    window.location.href="/admin/links_lists/links_lists_detial/"+sendstyles.links_id;
                }, 3000);
            } else {
                mviewToastr("error",data.msg);
            }
        },error:function(err){
            mviewToastr("error","网络异常,请联系客服处理！");
        }
    })
}

function styleChanges() {
    $("#background_color").val(styles.background_color);
    $("#button_text_color").val(styles.button_text_color);
    $("#botton_text").val(styles.botton_text);
    $("#logo").val(styles.logo);
    $("#logo_show").attr("src",styles.logo);
    if (styles.redirect_style == 1) {
        $("#redirect_style1").addClass("active");
        $("#redirect_style2").removeClass("active");
    } else {
        $("#redirect_style1").removeClass("active");
        $("#redirect_style2").addClass("active");
    }
    if (styles.button_border == 1) {
        $("#buttonBorder2").removeClass("btn-success").addClass("btn-default");
        $("#buttonBorder1").removeClass("btn-default").addClass("btn-success");
    } else {
        $("#buttonBorder1").removeClass("btn-success").addClass("btn-default");
        $("#buttonBorder2").removeClass("btn-default").addClass("btn-success");
    }
    if (styles.gif_show == 1) {
        $("#gifshow_1").addClass("active");
        $("#gifshow_2").removeClass("active");
        $("#gifshow_3").removeClass("active");
    } else if (styles.gif_show == 2) {
        $("#gifshow_1").removeClass("active");
        $("#gifshow_2").addClass("active");
        $("#gifshow_3").removeClass("active");
    } else {
        $("#gifshow_1").removeClass("active");
        $("#gifshow_2").removeClass("active");
        $("#gifshow_3").addClass("active");
    }
    $("#style_"+styles.style).addClass("active");
    if (styles.style == 2) {
        $("#submit_button").show();
        $("#submit_custom").hide();
        $("#updatelists").show();
        $("#styled_2").addClass("active");
        $("#styled_3").removeClass("active");
        $("#style_setting_more").show();
        $("#style_setting_logo label").text("自定义LOGO:");
        $("#logo_show").css("width","80px");
    } else if (styles.style == 3) {
        $("#submit_button").show();
        $("#submit_custom").hide();
        $("#updatelists").show();
        $("#styled_2").removeClass("active");
        $("#styled_3").addClass("active");
        $("#style_setting_more").hide();
        $("#style_setting_logo label").text("上传落地页图片:");
        $("#logo_show").css("width","auto");
    } else if (styles.style == 5) {
        $("#submit_button").hide();
        $("#submit_custom").show();
        $("#updatelists").hide();
    } else {
        $("#submit_button").show();
        $("#submit_custom").hide();
        $("#updatelists").hide();
    }
    demoSHow();
}

function demoSHow() {
    if (styles.style == 3) {
        html = '<img src="'+styles.logo+'" style="width:100%;height:auto;">';
        $(".public-container").html(html);
    } else {
        var borderradius = styles.button_border == 1 ? "3px" : "50px";
        html = '<div class="safe-notice-demo"><img src="https://nilife.oss-cn-beijing.aliyuncs.com/miniapp/images/setting/safe.png"><p>本链接经过<font style="font-weight: 500;color: #333333;">SSL安全加密</font>,请放心点击!</p></div><img class="logo-demo" src="'+styles.logo+'" id="logo_demo"><p class="notice-msg"><small>正在跳转到微信...</small><br>如未自动打开微信请点击下方按钮</p><div class="button-container"><a id="public-web-jump-button" href="" class="default" style="border-radius:'+borderradius+'">'+styles.botton_text+'</a></div><img id="dianjiimg" class="dianji-img-edit" src="https://nilife.oss-cn-beijing.aliyuncs.com/miniapp/banners/dianji.gif">';
        if (styles.gif_show == 1) {
            setTimeout(function (){
                $("#dianjiimg").hide();
            }, 100);
            setTimeout(function (){
                $("#dianjiimg").show();
            }, 3000);
        } else if (styles.gif_show == 2){
            setTimeout(function (){
                $("#dianjiimg").show();
            }, 100);
        } else {
            setTimeout(function (){
                $("#dianjiimg").hide();
            }, 100);
        }
        $(".public-container").html(html);
        $("#public-web-jump-button").css("background-color",styles.button_background_color);
        $("#public-web-jump-button").css("color",styles.button_text_color);
    }
}

function htmlStyleSelects(style) {
    styles.style = style;
    var links_id = $("#links_id").val();
    $(".badge-lists li").removeClass("active");
    $("#style_"+style).addClass("active");
    styleChanges();
    if (style == 5) {
        window.open("/admin/links_lists/links_lists_html_update/"+links_id);
    }
}